{%include file="public/head_common" /%}
<link rel="stylesheet" href="__STATIC__/assets/unpkg/element-ui@2.12.0/lib/theme-chalk/index.css">
<style>
	.edit-text,
    .del-text,
    .enable-text,
    .disable-text {
        cursor: pointer;
        color: #444;
        margin-right: 14px;
    }

    .edit-text {
        color: #03c5ff;
    }
	.del-text {
        color: red;
    }
</style>
<!-- MAIN -->
<div id="role" v-cloak class="main">
	<!-- MAIN CONTENT -->
	<div class="main-content">
		<ul class="breadcrumb">
			<li>账号管理</li>
			<li>角色列表</li>
		</ul>
		<div >
			<el-button type="primary" size="mini" @click="addOpen()">添加

			</el-button>
			<el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%" border
				>
				<!-- <el-table-column type="selection" min-width="36"> -->
				</el-table-column>
				<el-table-column label="ID" prop="role_id" min-width="70">
					<template slot="header" slot-scope="scope">
						<div class="display-flex">
							<div>ID</div>
						</div>
					</template>
				</el-table-column>

				<el-table-column label="角色" min-width="148">
					<template slot-scope="scope">
						<div >
							{{scope.row.role_name}}
						</div>
					</template>
				</el-table-column>

				<el-table-column fixed="right" label="操作" min-width="170">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="edit(scope.row.role_id)">修改</el-button>
						<el-button type="text" size="small" @click="del(scope.row.role_id)">删除</el-button>
						<!-- <span class="edit-text" @click="edit(scope.row.role_id)">编辑 </span>
						<span class="del-text" @click="del(scope.row.role_id)">删除 </span> -->
					</template>
				</el-table-column>

			</el-table>
		</div>
		<div class="page-container display-flex">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[15, 20, 30, 40]" :page-size="limit"
				layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
			</el-pagination>
		</div>
	</div>
<el-dialog
title="添加"
:visible.sync="addDialog"
@close="cancel"
width="30%">
	<div >
		<el-form ref="form" :model="model" label-width="80px">
			<el-form-item label="名称">
			  <el-input v-model="model.role_name"></el-input>
			</el-form-item>
			<el-form-item label="菜单">
				<span>
				  <el-checkbox v-model="menuExpandAll" title="展开/收起" @change="menuExpandAllChange('menuRef')">展开</el-checkbox>
				  <!-- <el-checkbox v-model="menuCheckAll" title="全选/反选" @change="menuCheckAllChange('menuRef')">全选</el-checkbox> -->
				</span>
				<el-tree
				  ref="menuRef"
				  :data="menuData"
				  :props="menuProps"
				  :default-checked-keys="model.menu_ids"
				  :node-key="menuIdkey"
				  show-checkbox
				  check-strictly
				  :expand-on-click-node="false"
				  @check="menuCheck('menuRef')"
				>
				  <span slot-scope="scope" class="custom-tree-node" style="display: flex;align-items: center;justify-content: center;">
					<span>{{ scope.node.label }}</span>
					<span v-if="scope.data.children" style="margin-left:10px">
					  <el-checkbox
						title="全选/反选"
						@change="menuCheckAllChangePid(scope.node, scope.data, 'menuRef')"
					  >全选</el-checkbox>
					</span>
					<span>
					</span>
				  </span>
				</el-tree>
			  </el-form-item>
		</el-form>

	</div>
	<span slot="footer" class="dialog-footer">
		<el-button @click="addDialog = false">取 消</el-button>
		<el-button type="primary" @click="add" >确 定</el-button>
	</span>
</el-dialog>
</div>
<script src="__STATIC__/assets/unpkg/vue@2.6.10/dist/vue.js"></script>
<script src="__STATIC__/assets/unpkg/element-ui@2.12.0/lib/index.js"></script>
<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#role',
		data: {
			list:[],//组织
			currentPage:1,//当前页
			totalPage:0,
			limit:15,
			model:{
				role_name:'',
				menu_ids: [],
			},
			addDialog:false,
			menuData:[],
			menuProps: { children: 'children', label: 'menu_name' },
			menuIdkey: 'menu_id',
			menuCheckAll: false,
      		menuExpandAll: false,
			menuCheckAllPid: {},
		},
		components: {
		},
		created: function(){
			this.getList()
		},
		methods:{
			cancel() {
				this.addDialog = false
				this.reset()
			},
			edit(role_id) {
				this.addDialog = true
				this.dialogTitle = this.name + '修改：' + role_id
				let that = this;
				$.post("{%:url('account/roleInfo')%}",{
				role_id:role_id
				},function(rsp){
					if(rsp.code==1){
						that.reset(rsp.data)
					}else{
						that.$message.error(rsp.msg)
					}
				},'json')
			},
			// 重置
			reset(row) {
				this.model = {
					role_name:'',
					menu_ids: [],
				}
				if (row) {
					this.model = row
				}
				if (this.$refs['ref'] !== undefined) {
					this.$refs['ref'].resetFields()
					this.$refs['ref'].clearValidate()
				}
				this.$refs['menuRef'].setCheckedKeys([])
				this.menuCheckAll = false
				this.menuExpandAll = false
			},
			menuCheckAllChangePid(node, data, refs = 'menuRef') {
				this.selMenuRefs = refs
				this.menuCheckAllPid[data.menu_id] = node.checked
				this.$refs[this.selMenuRefs].setChecked(data.menu_id, !this.menuCheckAllPid[data.menu_id], true)
				
				data.children.forEach((item) => {
					this.$refs[this.selMenuRefs].setChecked(item.menu_id, !this.menuCheckAllPid[data.menu_id], true)
				})
				this.menuCheckSetKeys()
			},
			// 菜单选择
			menuCheck(refs = 'menuRef') {
				this.selMenuRefs = refs
				this.menuCheckSetKeys()	
			},
			menuCheckSetKeys() {
				if (this.selMenuRefs === 'menuRef') {
					this.model.menu_ids = this.$refs[this.selMenuRefs].getCheckedKeys()
				} else {
					this.menu_ids = this.$refs[this.selMenuRefs].getCheckedKeys()
				}	
			},
			menuExpandAllChange(refs = 'menuRef') {
				this.selMenuRefs = refs
				const expanded = this.menuExpandAll
				const length = this.$refs[this.selMenuRefs].store._getAllNodes().length
				for (let i = 0; i < length; i++) {
					this.$refs[this.selMenuRefs].store._getAllNodes()[i].expanded = expanded
				}	
			},
			menuCheckAllChange(refs = 'menuRef') {
				this.selMenuRefs = refs
				if (this.menuCheckAll) {
					this.menuIds.forEach((item) => {
					this.$refs[this.selMenuRefs].setChecked(item, true, true)
					})
				} else {
					this.$refs[this.selMenuRefs].setCheckedKeys([])
				}
				this.menuCheckSetKeys()	
			},
			addOpen(){
				this.addDialog = true
			},
			del(id){
				let that = this;
				$.post("{%:url('account/roleDelete')%}",{
				role_id:id
				},function(rsp){
					if(rsp.code==1){
						that.$message.success(rsp.msg)
						
						that.getList()
					}else{
						that.$message.error(rsp.msg)
					}
					
				},'json')
			},
			add(){
				let that = this;
				if(that.model.role_id){
					$.post("{%:url('account/roleEdit')%}",that.model,function(rsp){
						if(rsp.code==1){
							that.$message.success(rsp.msg)
							that.getList();
							that.addDialog = false
						}else{
							that.$message.error(rsp.msg)
						}
						
					},'json')
				}else{
					$.post("{%:url('account/roleAdd')%}",that.model,function(rsp){
						if(rsp.code==1){
							that.$message.success(rsp.msg)
							that.getList();
							that.addDialog = false
						}else{
							that.$message.error(rsp.msg)
						}
						
					},'json')
				}
				
			},
			getList(){
				let that = this;
				$.post("{%:url('account/roleList')%}",{
				page:that.currentPage,
				page_size:that.limit
				},function(rsp){
					if(rsp.code == 1){
						that.list = rsp.data.list.data;
						that.currentPage = rsp.data.list.current_page;
						that.totalPage = rsp.data.list.total;
						that.menuData = rsp.data.menu
						that.menuIds = rsp.data.menu_ids
					}
					
				},'json')
				
			},
			handleSizeChange(val){
				this.limit = val;
				this.getList();
				
			},
			// 切换分页
			handleCurrentChange(val){
				this.currentPage = val;
				this.getList();
			},
		}
	});
</script>
	

			